<template>
  <div class="father">
    <h3>父组件</h3>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username" /> -->
    <!-- v-model的底层原理 -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value" -->

    <!-- v-model用在组件标签上 -->
    <!-- update:modelValue全是事件名 -->
    <!-- <SpyIsXnn v-model="username" /> -->
    <h3>v-model利用UI组件库效果数据展示:</h3>
    <h3>姓名:{{ username }}</h3>
    <h3>密码:{{ password }}</h3>
    <!-- <SpyIsXnn :modelValue="username" @update:modelValue="username = $event" /> -->
    <!-- 修改modelValue -->
    <SpyIsXnn v-model:un="username" v-model:pw="password" />
  </div>
</template>

<script setup lang="ts">
import { ref, type InputHTMLAttributes } from "vue";
import SpyIsXnn from "./SpyIsXnn.vue";
let username = ref("zhangsan");
let password = ref("123456");
</script>

<style scoped>
.father {
  background: rgb(179, 179, 179);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
</style>
